<template>
	<view class="information">

	<u-navbar 
		title="个人信息"
		:border-bottom="false"  
	></u-navbar>

	<view class="information__box">
		<view class="information__box__avatar" @click="avatarModel=true">
			<u-avatar :src="avatarUrl" size="120" ></u-avatar>
		</view>
		<u-modal v-model="avatarModel" :show-title="false" :show-confirm-button="false">
			<view class="information__box__basicInfo__modal">
				<view class="information__box__basicInfo__modal__button" @click="previewimage(avatarUrl)">查看大图</view>
				<view class="information__box__basicInfo__modal__button" @click="chooseAvatar()">更换头像</view>
			</view>
		</u-modal>
		<view class="information__box__title">
			基本资料
		</view>
		<view @click="usernameModalShow=true" class="information__box__basicInfo">
			<view class="information__box__basicInfo__type">
				昵称
			</view>
			<view v-if="username!=null" class="information__box__basicInfo__value">
				{{username}}
			</view>
			<view v-else class="information__box__basicInfo__value">
				填写昵称
			</view>
			<u-icon class="information__box__basicInfo__arrow" color="#b8b8b8" name="arrow-right"></u-icon>
			
			<u-modal v-model="usernameModalShow" title="输入昵称" :mask-close-able="true">
				<view class="information__box__basicInfo__modal">
					<u-field v-model="username" :placeholder="username">
					</u-field>
				</view>
			</u-modal>
			
		</view>
		<view @click="realnameModalShow=true"  class="information__box__basicInfo">
			<view class="information__box__basicInfo__type">
				真实姓名
			</view>
			<view v-if="realname!=null" class="information__box__basicInfo__value">
				{{realname}}
			</view>
			<view v-else class="information__box__basicInfo__value">
				填写姓名
			</view>
			<u-icon class="information__box__basicInfo__arrow" color="#b8b8b8" name="arrow-right"></u-icon>
			
			<u-modal  v-model="realnameModalShow" title="输入真实姓名" :mask-close-able="true">
				<view class="information__box__basicInfo__modal">
				<u-field v-model="realname" :placeholder="realname">
				</u-field>
				</view>
			</u-modal>
			
		</view>
		<view class="information__box__basicInfo" @click="ageModalShow=true">
			<view class="information__box__basicInfo__type">
				年龄
			</view>

			<view class="information__box__basicInfo__value" >
				{{age}}
			</view>
			<u-icon class="information__box__basicInfo__arrow" color="#b8b8b8" name="arrow-right"></u-icon>
			
			<u-modal  v-model="ageModalShow" title="请输入年龄" :mask-close-able="true">
				<view class="information__box__basicInfo__modal">
				<u-input v-model="age" :placeholder="age" type="number">
				</u-input>
				</view>
			</u-modal>
		</view>
		<view @click="genderModalShow=true" class="information__box__basicInfo">
			<view class="information__box__basicInfo__type">
				性别
			</view>
			<view class="information__box__basicInfo__value">
				{{gender}}
			</view>
			<u-icon class="information__box__basicInfo__arrow" color="#b8b8b8" name="arrow-right"></u-icon>
			
			<u-modal v-model="genderModalShow" title="选择性别" :mask-close-able="true">
				<u-radio-group  class="information__box__basicInfo__modal" v-model="gender">
					<u-radio 
						class="information__box__basicInfo__modal__item"
						v-for="(item, index) in genderList" :key="index" 
						:name="item.name"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-modal>
			
		</view>
		<view class="information__box__basicInfo">
			<view class="information__box__basicInfo__type">
				手机号
			</view>
			<view class="information__box__basicInfo__value">
				{{phone}}
			</view>
			<!-- <u-icon class="information__box__basicInfo__arrow" color="#b8b8b8" name="arrow-right"></u-icon> -->
			
		</view>
	
	</view>
	<view class="information__bottom-box">
		<view class="information__bottom-box__cancel" @click="cancelModel=true">取消</view>
		<view class="information__bottom-box__submit" @click="submitModel=true">保存修改</view>
	</view>
	<u-modal v-model="cancelModel"
		:show-title="false"
		content="确认取消"
		:show-cancel-button="true"
		confirm-color="#177fff"
		@confirm="goback">
	</u-modal>
	<u-modal v-model="submitModel" 
		:show-title="false"
		content="确认提交修改吗"
		:show-cancel-button="true"
		confirm-color="#177fff"
		@confirm="submit">
	</u-modal>
	</view>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				username:"",
				realname:"",
				age:"",
				gender:"",
				phone:"",
				genderModalShow:false,
				usernameModalShow:false,
				realnameModalShow:false,
				ageModalShow:false,
				avatarUrl:"",
				avatar:"",
				avatarModel:false,
				ageModalShow:false,
				genderList:[
					{
						name:"男",
					},
					{
						name:"女",
					},{
						name:"保密"
					}
				],
				ageList:[
					
				],
				cancelModel:false,
				submitModel:false,
			}
		},
		mounted(){
			console.log("userInfo",this.$store.state.userInfo)
			let userInfo=this.$store.state.userInfo
			this.avatarUrl=this.$store.state.userInfo.avatarUrl,
			this.username=userInfo.nickname
			this.realname=userInfo.realName
			this.phone=userInfo.phone
			this.email=userInfo.email
			this.age=userInfo.age 
			this.gender=this.getGenderText(userInfo.gender)
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				// 可以在此上传到服务端
				this.avatarUrl=path;
				let _this=this
				_this.objectURLToBlob(path).then(res => {
					let  ImgFile = res;
					console.log("image",ImgFile)
					console.log("updataData")
					let updataData=new FormData()
					updataData.append("phone",_this.phone)
					updataData.append("avatar",ImgFile)
					axios({
						url:_this.$store.state.baseURL+"/user/avatar",
						method:"post",
						headers:{
							"Content-Type":"multipart/form-data; boundary=----WebKitFormBoundary5NqxviCXpyAjOEV6boundary",
							"Authorization":uni.getStorageSync("token")
						},
						data:updataData
					}).then(response=>{
						if(response.data.state=="Success"){
							console.log("chanegeUrl")
							this.getUserInfo()
							_this.avatarUrl=response.data.msg
						}else{
							uni.showToast({
								title:response.data.msg,
								icon:"none",
								duration:2000
							})
						}
					}).catch((e)=>{
						console.log(e)
						uni.showToast({
							title:e,
							icon:"none",
							duration:2000,
						})
					})
				});     
			})
		},

		methods: {
			goback(){
				uni.navigateBack({
					animationDuration:200,
					animationType:"pop-out"
				})
			},
			objectURLToBlob(blodurl) {
				let time1 = Date.parse(new Date())
				let fileName=this.phone+time1+".avatar"
				return new Promise((resolve, reject) => {
					var http = new XMLHttpRequest();
					http.open('GET', blodurl, true);
					http.responseType = 'blob';
					http.onload = function(e) {
					    if (this.status == 200 || this.status === 0) {
						// console.log('blod数据',this.response);
						// 在将blod数据转为file
						let files = new window.File([this.response], fileName, { type: 'image' });
						// console.log('blod数据转换file',files);
						resolve(files);
					
				            }
					};
					http.send();
				});
			},
			
			async updateFile(path){
				let token=uni.getStorageSync("token")
				console.log("token",token)
			 	await uni.uploadFile({
				    url: 'http://139.9.104.172:8090/user/avatar', //仅为示例，非真实的接口地址
				    filePath: path,
				    name: 'file',
						header:{
							"Authorization:":token
						},
				    formData: {
				        'user': 'test'
				    },
				    success: (uploadFileRes) => {
				        console.log(uploadFileRes.data);
				    }
				});

			},
			async readImg(url){
				
				let imgData
				await axios({
					method:"get",
					url:url,
				}).then((response)=>{
					if(response.status==200){
						imgData=response.data
					}else{
						uni.showToast({
							title:response.data,
							icon:"none",
							duration:2000,
						})
					}
				}).catch((e)=>{
					
					uni.showToast({
						title:e,
						icon:"none",
						duration:2000,
					})
				})
				return imgData
			},
			getUserInfo(){
				this.$Axios({
				    method: 'get',
				    url: this.$store.state.baseURL+'/user/get',
				}).then((response) => {
					if(response.data.state=="Success"){
						let responseData = response.data;
						this.$store.state.userInfo=responseData.msg		
					}

				}).catch((error)=>{
				    console.log(error)
				})
			},
			showModal() {
				console.log("show model")
				this.genderModalShow = true;
			},

			chooseAvatar(){

				this.avatarModel=false
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/pages/core/mine/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			
			},
			previewimage(url){
				this.avatarModel=false
				
				uni.previewImage({
						indicator:"number",
						loop:true,
						urls: [url]
					})
				},
			submit(){
				uni.showLoading({
					title:"修改用户信息汇总"
				})
				let infoData={
					nickname:this.username,
					realName:this.realname,
					age:this.age,
					gender:this.getGender(this.gender),
					phone:this.phone
				}
				this.$Axios({
					url:this.$store.state.baseURL+"/user/info/edit",
					method:"post",
					data:infoData
				}).then(response=>{
					if(response.data.state=="Success"){
						uni.showToast({
							title:"修改信息成功",
							icon:"none",
							duration:1000
						})
						this.getUserInfo()
						// setTimeout(function(){
						// 	uni.navigateBack({
								
						// 	})
						// },1000)
					}else{
						uni.showToast({
							title:response.data.msg,
							icon:"none",
							duration:1000
						})
					}
				})
			},
			getGender(gender){
				if(gender=="男")
				{
					return 1
				}else if(gender=="女"){
					return 2
				}else{
					return 0
				}
			},
			getGenderText(gender){
				console.log("gender",gender)
				if(gender==1)
				{
					return "男"
				}else if(gender==2){
					return "女"
				}else{
					return "保密"
				}
			},
			getUserInfo(){
				console.log("getUserInfo")
				this.$Axios({
				    method: 'get',
				    url: this.$store.state.baseURL+'/user/get',
				}).then((response) => {
					if(response.data.state=="Success"){
						this.$store.state.userInfo=response.data.msg
					}else{
						uni.showToast({
							title:response.data.msg,
							icon:"none",
							duration:1000
						})
					}

				}).catch((error)=>{
				    console.log(error)
				})
			}
		}
	}
</script>

<style lang="less">
.information{
	display: flex;
	flex-direction: column;
	background-color: @uni-bg-color-grey;
	&__box{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		&__avatar{
			margin: @uni-spacing-row-lg @uni-spacing-col-lg ;
		}
		&__title{
			margin: @uni-spacing-row-lg @uni-spacing-col-lg ;
			font-size: @uni-font-size-lg;
			font-weight: bolder;
		}
		&__basicInfo{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: @uni-spacing-row-lg 
			@uni-spacing-col-lg  ;
			border-bottom: 0.1px solid @uni-border-color;
			&__modal{
				display: flex;
				flex-direction: column;
				&__button{
					margin:15rpx auto;
					text-align: center;
					padding: 10rpx 90rpx;
				}
				&__button :hover{
					background-color: #f4f4f4;
						
				}
				&__item{
					margin:0px auto 10px 30px;
				}
			}
			&__type{
				margin-right: auto;
			}
			&__value{
				color: #9f99a5;
			}
			&__arrow{
			}
		}
	}
	&__bottom-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		padding: @uni-spacing-row-lg @uni-spacing-col-lg;
		bottom: 0;
		width: calc(100vw);
		background-color: #fff;
		
		&__cancel{
			margin-right: @uni-spacing-col-lg;
			padding-top: @uni-spacing-row-base;
			padding-bottom: @uni-spacing-row-base;
			text-align: center;
			flex: 0.5;
			border-radius: @uni-border-radius-base;
			border: 1px solid @font-color-blue;
			font-size: @uni-font-size-lg;
			color: @font-color-blue;
		}
		&__submit{
			padding-top: @uni-spacing-row-base;
			padding-bottom: @uni-spacing-row-base;
			text-align: center;
			flex: 1;
			border-radius: @uni-border-radius-base;
			border: 1px solid @font-color-blue;
			background-color: @uni-bg-color-blue;
			font-size: @uni-font-size-lg;
			color: #fff;
		}
	}
}
</style>
